<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>JSON Test</title>
    <script type="text/javascript" src="js/jquery.min.js"></script>
  </head>
 
  <script type="text/javascript">
  	$(function(){
  		
  		$("#test").click(function(){

  			$.ajax({
  				
  				type:"post",
				url:"test/TestJSON",
				data:"userName= 李康 ",
				dataType:"text",
				success:function(datas){
					if(datas==""){
						alert("没有获取到数据");
					}else{
						//alert("success..");
						var dataObj = eval("(" + datas + ")");
						$("#table1 tr").remove("tr[id!=first]");
						$.each(dataObj,function(){
							var $tr1 = $("<tr><td>"+this.name+"</td><td>"+this.age+"</td><td>"+this.sex+"</td><td><a href='javascript:void()' id='del'>删除</a></td></tr>");
							$("#table1").append($tr1);
						});
						/* $.each(dataObj,function(i){
							alert(dataObj[i].name);
						}); */
						/* $.each(dataObj,function(i,item){
							alert(item.name +" "+item.age);
						}); */
						
					}
				},
				error:function(message){
					alert("wrong..");
				}
				//https://git.oschina.net/lkkang/commZone1.git
  			});
  			
  		});
  		
  		$("#clearData").on("click",function(){
  			$("#table1 tr").remove("tr[id!=first]");
  		});
  		
  		$("#del").on('click','td>a',function(){
  			alert("s");
  			//$(this).parent().remove();
  		});
  		 
  	});
  	
  </script>
  <body style="width:40%; text-align: center;">
   	
   	<button id="test">TTTTT</button> &nbsp;&nbsp;&nbsp;
   	<button id="clearData">清除数据</button>
   	
   	<table id="table1" border="1" width="30%">
   		<tr id="first">
   			<td>name</td>
   			<td>age</td>
   			<td>Sex</td>
   			<td>oprator</td>
   		</tr>
   		
   	</table>
   	
  </body>
</html>
